<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>一个重要的内置关系</title>
        <script type="text/javascript" src="../../js/vue.js"></script>
        <style>
            .demo{
                background-color: orange;
            }
        </style>
    </head>
    <body>
        <div id="root">
             <school></school> 
        </div>

        <script type="text/javascript">
            Vue.config.productionTip = false //阻止生产提示
            Vue.prototype.x=99 //在Vue的原型对象上追加一个x属性，测试VueComponent能不能读取到

            //创建school组件，在school组件中局部注册student组件
            const school = Vue.extend({
               name:'school',  //使用name配置项指定组件在开发中工具中显示的组件名称，如果没写就显示注册时的名称
               template:`
                <div>
                        <h2>学校名称：{{schoolName}}</h2>
                        <h2>学校地址：{{address}}</h2>
                        <button @click="showX">点我看vc</button>
                </div>
               `,
               data(){
                return {
                    schoolName:'上海一中',
                    address:'上海'
                }
               },
               methods: {
                showX(){
                    console.log('@@',this) //这里的this是Vuecomponent实例，不是Vue实例，但是和Vue实例一样
                    console.log(this.x) // 在VueComponent的实例对象也能找到Vue的属性内容x
                }
               },
            })

            
            const vm =  new Vue({
                el:'#root',
                data:{
                    msg:'你好！'
                },
                components:{
                    school

                }
            })

        </script>

        
    </body>
</html>